<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden;"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onChange="handleChange"
      @onCreated="handleCreated"
    />
  </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css'; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, defineProps, defineEmits, watch } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
let editorInitialized = false;

const props = defineProps({
  msg: {
    type: String,
    default: '',
  },
  curId: String,
  curIndex: String | Number
});

const editorRef = shallowRef();
const valueHtml = ref('');
const mode = ref('default');
const emit = defineEmits(['input-value']);

onMounted(() => {
  window.setTimeout(() => {
    valueHtml.value = props.msg;
  }, 100);
});

watch(() => props.msg, (val) => {
  if (val) {
    console.log('value', val);
    window.setTimeout(() => {
      valueHtml.value = val;
    }, 100);
  }
});

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleChange = (editor) => {
  if (editorInitialized) {
    const { curId, curIndex } = props;
    let str = editor.getHtml().replace(/<p>(.*?)<\/p>/g, '<li>$1</li>');
    emit('input-value', {value: str, index: curIndex, type: curId });
  } else {
    editorInitialized = true;
  }
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

</script>
